<style scoped>
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }

  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }

  .rj-cell.max span {
    font-size: 16px;
    padding-right: 20px;
  }

  .rj-cell label {
    color: #333;
    font-size: 14px;
    width: 44%;
    display: inline-block;
    padding: 5px 3%;
    text-align: right;
  }

  .rj-cell span {
    font-size: 14px;
    color: #333;
    display: inline-block;
    width: 50%;
  }

  .rj-cell.note label {
    float: left;
  }

  .rj-cell.note span {
    width: 80%;
    display: inline-block;
  }

  .weui-cells {
    margin-top: 0;
  }

  .weui-cells_form {
    background: #fbfbfb;
  }

  .weui-cell {
    background: #fff;
  }

  .weui-cells__title {
    text-align: left;
  }

  .oitem {
    padding: 3px;
  }

  .hide {
    display: none;
  }

  #acts {
    font-size: 0;
  }

  #acts span {
    font-size: 14px;
  }

  .halfbtn {
    display: inline-block;
    width: 49%;
  }

  .weui-label {
    text-align: left;
  }

  .time {
    border: none;
    font-size: 17px;
  }

  .weui-cell_select {
    padding: 10px 15px;
  }

  .weui-select {
    height: auto;
    line-height: normal;
  }


  .weui_uploader_input_wrp {
    float: left;
    position: relative;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 77px;
    height: 77px;
    border: 1px solid #D9D9D9;
  }

  .weui_uploader_hd {
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
  }

  .weui_uploader_files {
    list-style: none;
  }

  .weui_uploader_input_wrp:before {
    width: 2px;
    height: 39.5px;
  }

  .weui_uploader_input_wrp:before, .weui_uploader_input_wrp:after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #D9D9D9;
  }

  .weui_uploader_input {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  .weui_uploader_input_wrp:after {
    width: 39.5px;
    height: 2px;
  }

  .weui_uploader_bd {
    overflow: hidden;
  }

  .weui_cell {
    padding: 10px 15px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .outstore >>> .weui-uploader_files {
    list-style: none;
    overflow-y: hidden;
  }

  .outstore >>> .weui-uploader_file {
    float: left;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 79px;
    background: no-repeat 50%;
    background-size: cover;
  }

  .weui-cell.fir {
    border-top: 0;
  }

  .help {
    text-align: right;
    padding: 5px;
    font-size: 12px;
    color: #bbb;
  }

  .weui_uploader_input_wrp.inrow {
    width: 30px;
    height: 30px;
    margin: 0;
  }

  .weui_uploader_input_wrp:before {
    height: 19.5px;
  }

  .weui_uploader_input_wrp:after {
    width: 19.5px;
  }

  .weui-uploader_file.inrow {
    margin: 0;
    width: 40px;
  }

  li.weui-uploader_file {
    display: inline-block;
    padding: 3px 5px;
  }

  ul#images {
    text-align: right;
  }

  .addPur >>> .ui.selection.dropdown {
    border: none;
  }
  .addPur >>> .ui.dropdown .menu>.item {
    font-size: 18px;
  }
  .addPur >>> .ui.search.dropdown>.text {
    font-size: 18px;
  }

  /*.addPur >>> .ui.search.dropdown>.text {*/
  /*  line-height: 20px;*/
  /*}*/
</style>
<template>
  <div class="addPur" style="overflow: hidden;">
    <div
      style="height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
      添加质检记录
      <a href="javascript:" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="@/assets/back.png" style="width: 20px"/>
      </a>
    </div>
    <div class="weui-cells weui-cells_form">
      <form action="" method="post" id="formid">
        <input type="hidden" name="foguid" :value="guid">
        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">总重量</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input" type="number" id="total" name="totalweight" v-model.number="totalweight" @keyup="getResult" placeholder="请输入总重量(单位：kg)">
          </div>
        </div>
        <div class="cellgroup">
          <div v-for="(qaitem, index) in qaItems">
            <div v-if="qaitem.qaflag == 1" class="weui-cell">
              <input type="hidden" id="tuza" :name="'item'.concat(index + 1).concat('weight')" v-model="mixweight" >
            </div>
            <div v-else class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label">{{qaitem.itemname}}</label></div>
              <div class="weui-cell__bd">
                <input v-if="qaitem.qaflag == 2" class="weui-input ungraded" ref="ungraded" @keyup="getResult(qaitem.qaflag)" :data-type="qaitem.dataType" type="number" :name="'item'.concat(index + 1).concat('weight')" :placeholder='qaitem.remark'>
                <input v-else-if="qaitem.qaflag == 3" class="weui-input graded" ref="graded" :data-type="qaitem.dataType" :data-label="qaitem.itemname" type="number" :name="'item'.concat(index + 1).concat('weight')" :placeholder='qaitem.remark'>
                <input v-else-if="qaitem.dataType == 2" class="weui-input rated" ref="rated" :data-type="qaitem.dataType" :data-label="qaitem.itemname" type="number" :name="'item'.concat(index + 1).concat('weight')" :placeholder='qaitem.remark'>
              </div>
            </div>
          </div>
        </div>
        <div class="weui-cell fir">
          <div class="weui-cell__hd"><label class="weui-label">合格薯重量</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input" type="number" id="okweight" name="okweight" v-model.number="okweight" @keyup="getResult" placeholder="除土杂病害等各项不合格薯之外的重量(kg)">
          </div>
        </div>
        <div class="weui-cell" style="color:red;">
          <div class="weui-cell__hd"><label class="weui-label">土杂重量：</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input" type="text" name="mixweight" id="mix" v-model="mixweight" disabled value="0" >
          </div>
        </div>
        <div class="weui-btn-area">
          <a class="weui-btn weui-btn_primary subbtn" href="javascript:" @click="postForm()">提交</a>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
  import 'vue-search-select/dist/VueSearchSelect.css'
  import { ModelListSelect } from 'vue-search-select'
  import UploadFile3 from "@/components/common/UploadFile3";
  import qs from 'qs';
  // var elem = $('.ungraded');
  var dustWei = 0;
  export default {
    name: 'AddQarecord',
    data() {
      return {
        id: '',
        guid: '',
        qaItems: [],
        totalweight: '',
        mixweight: '',
        okweight: '',
      }
    },
    components: {ModelListSelect, UploadFile3},
    async mounted() {
      this.id = this.$route.query.id;
      this.guid = this.$route.query.guid;
      this.getQaItems();
    },
    watch: {
      // okweight: function (val) {
      //   this.getResult();
      // },
      // totalweight: function (val) {
      //   this.getResult();
      // },
    },
    methods: {
      getGradedWei: function(ele) {
        console.log('this.$refs.rated:', this.$refs.rated)
        console.log('this.$refs.graded:', this.$refs.graded)
        console.log('ele:', ele)
        if (!ele) return;
        var res = false;
        for (var i=0; i<ele.length; i++) {
          console.log(33)
          let itemval = parseFloat(ele[i].value);
          let dataType = ele[i].getAttribute('data-type');
          if (dataType == 1) {
            console.log(11111)
            if (itemval > this.totalweight) {
              let inputbabel = ele[i].getAttribute('data-label');
              console.log(inputbabel)
              this.toastText(inputbabel + '重量有误！');
              res = true;
              break;
            }
          } else if (dataType == 2) {
            console.log(44)
            if (itemval > 100) {
              let inputbabel = ele[i].getAttribute('data-label');
              console.log(inputbabel)
              this.toastText(inputbabel + '有误！');
              res = true;
              break;
            }
          }
        }
        return res;
      },
      compute: function (totalweight){
        let elem = this.$refs.ungraded;
        if (!elem) return;
        let mixweight = 0;
        elem.forEach((item, index) => {
          let temp = 0;
          let dataType = item.getAttribute('data-type');
          if (dataType == 1) {
            temp = this.toNum(item.value);
          } else if (dataType == 2) {
            temp = this.toNum(item.value) * totalweight;
          }
          mixweight += temp;
        })
        return mixweight;
      },
      getResult: function(qaflag = '') {
        console.log('getResult')
        var totalweight = this.totalweight ? this.totalweight : 0;
        var okweight = this.okweight ? this.okweight : 0;

        if (totalweight != "") {
          var mixweight = this.compute(totalweight) || 0;
          dustWei = totalweight - mixweight - okweight;
          var dust = totalweight - mixweight - okweight;
          dust = Math.round(dust * 100) / 100;
          this.mixweight = dust;
          // $('#mix').val(dust);
          // $('#tuza').val(dust);
        }
      },
      getQaItems: function () {
        this.axios({
          method: 'get',
          url: '/prod-api/harvest/freightorder/getQaItems',
          params: {id: this.id}
        }).then(response => {
          if (response.data.code == 200) {
            this.qaItems = response.data.data;
          } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
            //不不设置提示
          } else {
            this.toastText('获取质检项数据失败')
          }
        });
      },
      //提交表单数据
      postForm: function () {
        let that = this;
        //表单校验
        if (!this.totalweight) {
          this.toastText('总重量不能为空!')
          return false;
        }
        if (!this.okweight) {
          this.toastText('合格薯重量不能为空!')
          return false;
        }
        if (this.getGradedWei(this.$refs.graded) || this.getGradedWei(this.$refs.rated)) {
          return false;
        }
        //防止重复提交
        $('.subbtn').attr("disabled",true).css("pointer-events","none");
        //显示提交状态
        $.showLoading("正在提交");
        let postData = this.serialize2Obj($("#formid").serializeArray());
        this.axios({
          method: 'post',
          url: `/prod-api/harvest/freightorder/updateRecord`,
          data: postData
        }).then(response => {
          //恢复提交按钮可点击
          $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          //关闭提交状态
          $.hideLoading();

          if (response.data.code == 200) {
            this.toastSuccess("保存成功");
            this.$router.push({name: 'Qarecord', query: {id: this.id, guid: this.guid}});
          } else {
            this.toastError('系统错误');
          }
        }).catch(function (error) {
          //恢复提交按钮可点击
          $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          //关闭提交状态
          $.hideLoading();
          that.toastError('系统错误');
        });
      },
      checkFormElm: function () {
        if (this.$refs.name && this.$refs.name.value == '') {
          this.toastText('请输入名称');
          return false;
        }
        return true;
      }
    }
  }
</script>
